<script setup lang="ts">
    import {ElRow, ElCol, ElCard} from 'element-plus'
    import { useI18n } from '@/hooks/web/useI18n'
    import { Table } from '@/components/Table'
    import { reactive} from 'vue'
    import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'

    import { getTableListRegister } from '@/api/asd/table'
    import { useTable } from '@/api/asd/table/useTable'
    import { TableDataRegister } from '@/api/asd/table/types'

    const { register, tableObject, methods } = useTable<TableDataRegister>({
        getListApi: getTableListRegister,
        response: {
            list: 'list',
            total: 'total'
        },
        defaultParams:{
            mid:1,
        },
    })

    const { getList } = methods
    getList()

    const { t } = useI18n()

    const crudSchemas = reactive<CrudSchema[]>([
        {
            field: 'login_date',
            label: t('tableDemo.register_time'),
            type: 'register_time',
            /* 时间日期 */
            formatter: (row, column, cellValue, index) => {
                let format = 'YYYY-mm-dd HH:MM:SS'
                let date = new Date(cellValue);
                const dataItem = {
                    'Y+': date.getFullYear().toString(),
                    'm+': (date.getMonth() + 1).toString(),
                    'd+': date.getDate().toString(),
                    'H+': date.getHours().toString(),
                    'M+': date.getMinutes().toString(),
                    'S+': date.getSeconds().toString(),
                };
                Object.keys(dataItem).forEach((item) => {
                    const ret = new RegExp(`(${item})`).exec(format);
                    if (ret) {
                        format = format.replace(ret[1], ret[1].length === 1 ? dataItem[item] : dataItem[item].padStart(ret[1].length, '0'));
                    }
                });
                return format
            }
        },
        {
            field: 'login_ip',
            label: t('tableDemo.register_ip'),
            type: 'register_ip'
        },
        {
            field: 'login_location',
            label: t('tableDemo.register_area'),
            type: 'register_area'
        },
    ])
    const { allSchemas } = useCrudSchemas(crudSchemas)
</script>

<template>
    <ElCol :span="24">
        <ElCard shadow="hover" class="center-box">
            <template #header>
                <div class="card-header">
                    <span> 登录日志 </span>
                    <!--<div class="yang-box"><el-button type="success"><Icon icon="system-uicons:reset"/>刷新</el-button></div>-->
                </div>
            </template>
            <Table
                v-model:pageSize="tableObject.pageSize"
                v-model:currentPage="tableObject.currentPage"
                :columns="allSchemas.tableColumns"
                :data="tableObject.tableList.slice((tableObject.currentPage - 1) * tableObject.pageSize,tableObject.currentPage * tableObject.pageSize)"
                :loading="tableObject.loading"
                :pagination="{total: tableObject.total}"
                @register="register">
            </Table>
        </ElCard>
    </ElCol>
</template>
<style lang="less" scoped>
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .center-box{
        margin-bottom: 20px;
    }
    /* 按钮
    .yang-box{
        height: 35px;
        line-height: 35px;
        width: 100px;
        background-color: #009688;
        color: #ffffff;
        text-align: center;
        border-radius: 5%;
    }*/
</style>
<style lang="less">
    /* 它本身边框的颜色 */
    .el-card__header{
        background-color: #F3F3F3;
        border-color: #C0C0C0;
    }
    /* 图标样式
    .el-icon svg{
        margin: 0px 15px -2px 0px;
    }*/
</style>


